<template>
    <div style="margin-top: 2vh ;margin-left: 60vw; ">
        <el-button type="primary" @click="find()">检索</el-button>
        <el-button type="success" @click="add()">添加</el-button>

    </div>

    <div style="margin-top: 2vh ;margin-left: 10vw; width:80vw; ">
            <el-form-item style="font-size: large;" label="类别：">
            <el-select placeholder="请选择" v-model="type">
              <el-option v-for="type in goodsTypeListData" :label="type.name" :value="type.id" :key="type.id"></el-option>
            </el-select>
          </el-form-item>    
    </div>


    <div> 
        <div>
            <el-table
                :data="charts"
                stripe
                style=" margin-left: 10vw; margin-top: 2vh; width: 80vw">
                <el-table-column
                prop="id"
                label="序号"
                width="100">
                </el-table-column>
                <el-table-column
                prop="type"
                label="类型"
                width="100">
                </el-table-column>
                <el-table-column
                prop="name"
                label="书名"
                width="200">
                </el-table-column>
                <el-table-column
                prop="number"
                label="数量"
                width="200">
                </el-table-column>
                <el-table-column
                prop="photo"
                label="照片地址"
                width="500">
                </el-table-column>
                <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                    size="mini"
                    @click="delet(scope.$index)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
    
        </div>
       
</div>
<div style="height: 10vh;"></div>
</template>

<script>
import $ from "jquery";
import { ref } from "vue";
import { useStore } from "vuex";
import router from "@/router";
export default {
    setup(){

        let store = useStore();
        let charts = ref([]);
        let type = ref({});
          const goodsTypeListData = ref([
              { id:1,name:"计算机类"},{id:2,name:"科学类"},{id:3,name:"数学类"}
          ])
        
        const info =()=>{
            $.ajax({
                url:"http://localhost:3000/api/book/info/",
                type:"get",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },
                success(resp){
                    charts.value = resp;
                    console.log(charts)                  
                }
                })
        }
        info()
        const find = ()=>{
            $.ajax({
                url:"http://localhost:3000/api/book/gettype/",
                type:"post",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },  
                data:{
                      type:type.value
                    },
                success(resp){
                    charts.value = resp;
                    console.log(charts)                  
                }
                })
        }
        const delet =(index)=>{
            console.log(index);           
        }
        const add =()=>{
            router.push({name:"addbook"});
        }
        
        
        return{
            delet,
            add,
            charts,
            type,
            goodsTypeListData,
            find
    }

    }
}
</script>


<style scoped>

</style>